<template>
  <div style="padding:30px;">
    <el-form :inline="true" :model="form" class="demo-form-inline">
      <el-row :gutter="20">
        <el-col :span="6">
       <el-form-item label="选择客户">
         <el-select v-model="form.typeName" clearable placeholder="请选择客户">
           <el-option v-for="(item) in optionSupplier"
                 :label="item.cusName"
                 :value='item.customerId'>
           </el-option>
         </el-select>
       </el-form-item>
        </el-col>
       <el-col :span="6">
         <el-form-item label="选择仓库">
           <el-select v-model="form.typeName2" clearable placeholder="请选择仓库">
             <el-option v-for="(item) in optionDepot"
                   :label="item.name"
                   :value='item.id'>
             </el-option>
           </el-select>
         </el-form-item>
       </el-col>
       <el-col :span="6">
         <el-form-item label="状态">
          <el-select v-model="form.typeName3" clearable placeholder="请选择">
            <el-option label="未通过" :value="0"></el-option>
            <el-option label="未出库" :value="1"></el-option>
            <el-option label="已出库" :value="2"></el-option>
          </el-select>
         </el-form-item>
       </el-col>
      </el-row>
      <el-row>
         <el-form-item label="销售时间">
            <el-col :span="10">
              <el-date-picker type="date" clearable placeholder="选择日期" v-model="form.beginDate" value-format="yyyy-MM-dd HH:mm:ss" style="width: 100%;"></el-date-picker>
            </el-col>
            <el-col class="line" :span="1">-</el-col>
            <el-col :span="10">
              <el-date-picker type="date" clearable placeholder="选择日期" v-model="form.endDate" value-format="yyyy-MM-dd HH:mm:ss" style="width: 100%;"></el-date-picker>
            </el-col>
          </el-form-item>
             <el-form-item>
               <el-button type="primary" icon="el-icon-search" @click="onSubmit">查询</el-button>
             </el-form-item>
      </el-row>
    </el-form>
     <el-button @click="setRemark(1)" type="primary" size="small">通过申请</el-button>
     <el-button @click="setRemark(2)" type="primary" size="small">登记出库</el-button>
     <br /><br />
    <el-table
         ref="multipleTable"
         :data="tableData"
         :border=true
         style="width: 100%;"
         @selection-change="addChecked">
      <el-table-column
            type="selection"
            width="55">
      </el-table-column>
      <el-table-column prop="saleId" label="编号" width="50"></el-table-column>
      <el-table-column prop="codeId" label="订单号" width="100"> </el-table-column>
      <el-table-column prop="saleTime" label="销售时间" width="100"> </el-table-column>
      <el-table-column prop="depotName" label="所属仓库" width="100"> </el-table-column>
      <el-table-column prop="cusName" label="所属客户" width="100"> </el-table-column>
      <el-table-column prop="num" label="商品种类" width="100"> </el-table-column>
      <el-table-column prop="saleTotal" label="总计" width="100"> </el-table-column>
     <el-table-column prop="tagstandby1" label="状态" width="width: 20%">
       <template slot-scope="scope">
         <el-tag :type="scope.row.state == '0' ? 'danger' : scope.row.state == '1' ? 'success' : 'error'"
           disable-transitions>{{scope.row.state==0?'未通过':scope.row.state == '1' ? '未出库' : '已出库'}}</el-tag>
       </template>
     </el-table-column>
     <el-table-column prop="userName" label="负责人" width="100"> </el-table-column>
     <el-table-column prop="payment" label="支付方式" width="100"> </el-table-column>
     <el-table-column prop="remarks1" label="备注" width="100"> </el-table-column>
     <el-table-column fixed="right" align="center" label="操作" width="200">
       <template slot-scope="scope">
         <el-button @click="showInfo(scope.row)" type="success" size="small">查看详情</el-button>
       </template>
     </el-table-column>
    </el-table>
    <div class="block">
      <el-tag class="demonstration">调整每页显示条数</el-tag>
      <el-pagination background layout="sizes,prev, pager, next" :total="count" :page-sizes="[3, 4, 5, 6]"
        :page-size="3" @current-change="getAllByLimit" @size-change="handleSizeChange">
      </el-pagination>
    </div>
    <!-- v-dialogDrag
        :close-on-click-modal="false"
        :modal="false"
         以上意思是弹出框可移动动-->
    <el-dialog
        title="申请详情"
        :visible.sync="productsInfo"
        width="800px"
        v-dialogDrag
        :close-on-click-modal="false"
        :modal="false">
      <el-table ref="filterTable" :data="tableInfo" style="width: 100%">
        <el-table-column prop="productName" label="商品名称" width="180"></el-table-column>
         <el-table-column prop="unit" label="商品单位" width="180"></el-table-column>
        <el-table-column prop="price" label="商品单价" width="180"></el-table-column>
        <el-table-column prop="slistNumber" label="数量" width="180"></el-table-column>
        <el-table-column prop="total" label="小计" width="180"></el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>
<script>
  import {getAll,set} from '@/api/sale'
  import {getAllSale} from '@/api/saleList'
  import { getAll as getAllDepot } from '@/api/depot'
  import { getAll as getAllCus } from '@/api/customer'
  import {setAdd} from '@/api/Inventory'
  export default {
    data() {
      return {
        topForm:[],
        optionSupplier : [],
        optionDepot : [],
        form: {
          typeName: '',//供货商
          typeName2: '',//所属仓库
          beginDate : '',//进货事件前
          endDate : '' ,//结束时间
          typeName3 : ''//状态
        },
        page: 1,
        limit: 3,
        tableData: [],
        tableInfo: [],
        setForm : [],
        checkedColumn : [],
        count: 4,
        isLimit: false,
        productsInfo : false,
        setShow : false
      }
    },
    created() {
      this.getAllByLimit(1);
      for(let i=0;i<this.tableData.length;i++){
         console.log(this.tableData[i]);
      }
      this.getDepot();
      this.getAllSupplier();
    },
    methods: {
      //获取仓库
      getDepot(){
        return new Promise((resolve,reject)=>{
          getAllDepot({}).then(res=>{
            this.optionDepot=res.data;
          })
        })
      },
      //获取客户
      getAllSupplier(){
        return new Promise((resolve,reject)=>{
          getAllCus({}).then(res=>{
            this.optionSupplier=res.data;
          })
        })
      },
      //分页查询所有
      getAllByLimit(val) { // 修改当前页所触发的函数
      this.page=val;
        if (this.isLimit) {
          return new Promise((resolve, reject) => {
            getAll({
              'limit': this.limit,
              'page': val,
              'typeName': this.form.typeName,
              'typeName2': this.form.typeName2,
              'beginDate': this.form.beginDate,
              'endDate': this.form.endDate,
              'typeName3': this.form.typeName3
              }).then(response => {
              const {data, count} = response
              this.tableData = data;
              this.count = count;
              resolve()
            }).catch(error => {
              reject(error)
            })
          })
        } else {
          return new Promise((resolve, reject) => {
            getAll({
              'limit': this.limit,
              'page': val
            }).then(response => {
              const {
                data,
                count
              } = response
              this.tableData = data;
              this.count = count;
              resolve()
            }).catch(error => {
              reject(error)
            })
          })
        }
      },
      //当limit修改时分页查询所有
      handleSizeChange(val) {
        this.limit=val;
        if (this.isLimit) {
          return new Promise((resolve, reject) => {
            getAll({
              'limit': val,
              'page': this.page,
              'typeName': this.form.typeName,
              'typeName2': this.form.typeName2,
              'beginDate': this.form.beginDate,
              'endDate': this.form.endDate,
              'typeName3': this.form.typeName3
            }).then(response => {
              const {
                data,
                count
              } = response
              this.tableData = data;
              resolve()
            }).catch(error => {
              reject(error)
            })
          })
        } else {
          return new Promise((resolve, reject) => {
            getAll({
              'limit': val,
              'page': 1
            }).then(response => {
              const {
                data,
                count
              } = response
              this.tableData = data;
              resolve()
            }).catch(error => {
              reject(error)
            })
          })
        }

      },
      //模糊查询表单提交
      onSubmit() {
        this.isLimit = true;
        return new Promise((resolve, reject) => {
          getAll({
            'limit': this.limit,
            'page': this.page,
            'typeName': this.form.typeName,
            'typeName2': this.form.typeName2,
            'beginDate': this.form.beginDate,
            'endDate': this.form.endDate,
            'typeName3': this.form.typeName3
          }).then(response => {
            const {
              data,
              count
            } = response
            this.tableData = data;
            this.count = count;
            resolve()
          }).catch(error => {
            reject(error)
          })
        })
      },
      showInfo(row){
        this.productsInfo=true;
        return new Promise((resolve, reject) => {
          getAllSale({
            'saleId': row.saleId
          }).then(response => {
            const {
              data,
              count
            } = response
            this.tableInfo = data;
            resolve()
          }).catch(error => {
            reject(error)
          })
        })
      },
      addChecked(val){
        this.checkedColumn=val;
      },
      setRemark(val){
        if(val==1){
           let rs=true;
           let that = this;
            this.checkedColumn.forEach(function(el) {
              console.log(el);
              if(el.state==2){
                rs=false;
                that.$message({
                  showClose: true,
                  message: '不能通过已出库的申请',
                  type: 'warning'
                });
              }else{
                 el.state=val;
                return new Promise((resolve, reject) => {
                  set({
                    'saleId' : el.saleId,
                    'state' : val
                  }).then(response => {
                    if(!response.data){
                      rs=false
                    }
                    resolve()
                  }).catch(error => {
                    reject(error)
                  })
                })
              }
            })
            if(rs){
            that.$message({
                showClose: true,
                message: '操作成功',
                type: 'success',
                onClose: ()=>{
                  that.$refs.multipleTable.clearSelection();
                }
              });
            }
        }else{
          let rs=true;
          let that = this;
          this.checkedColumn.forEach(function(el) {
            console.log(el);
            if(el.state==0){
              rs=false;
              that.$message({
                showClose: true,
                message: '需要先通过申请',
                type: 'error'
              });
            }else{
                el.state=val;
              return new Promise((resolve, reject) => {
                set({
                  'saleId' : el.saleId,
                  'state' : val,
                  'depotId' : el.remarks2
                }).then(response => {
                  if(!response.data){
                    rs=false
                  }
                  resolve()
                }).catch(error => {
                  reject(error)
                })
              })
            }
          });
          if(rs){
          this.$message({
              showClose: true,
              message: '操作成功',
              type: 'success',
              onClose: ()=>{
                this.$refs.multipleTable.clearSelection();
              }
            });
          }
        }
      },
    }
  }
</script>

<style>

</style>
